<template>
  <div class="tre-search">
    <q-field style="{text-align: left}"
      helper="Some helper"
      class="col-xs-3 col-md-6"
      error-label="No match found">
      <q-checkbox v-model="chipStatus.pokemon" label="Pokemon"/>
      <q-checkbox v-model="chipStatus.item" label="Item" style="margin-left: 20px"/>
      <q-checkbox v-model="chipStatus.move" label="Move" style="margin-left: 20px"/>
      <q-checkbox v-model="chipStatus.ability" label="Ability" style="margin-left: 20px"/>
      <q-search
        inverted color="amber"
        float-label="Gotta Get Em' All"
        placeholder="输入宝可梦、道具、特性、技能..." autofocus
        :attributes="{autocorrect: 'off'}" max-length="15" 
        :loading="loading"
        v-model="input" ref="input1"
        @keydown="updateCheck">
        <q-autocomplete
          :static-data="{field: 'sublabel', list: allNames}" />
      </q-search>
    </q-field>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */
import {
  QField,
  QInput,
  QBtn,
  QIcon,
  QCheckbox,
  QChipsInput,
  QAutocomplete,
  QSearch,
  Toast,
  uid,
  filter
} from 'quasar'
import allNames from '../statics/datas/allNames_no_indent.json'
import pokeChn from '../statics/datas/pokemonNames/pokemonChnNames.json'
import pokeJpn from '../statics/datas/pokemonNames/pokemonJpnNames.json'
import pokeEng from '../statics/datas/pokemonNames/pokemonEngNames.json'
import itemChn from '../statics/datas/itemNames/itemChnNames.json'
import itemJpn from '../statics/datas/itemNames/itemJpnNames.json'
import itemEng from '../statics/datas/itemNames/itemEngNames.json'
import moveChn from '../statics/datas/moveNames/moveChnNames.json'
import moveJpn from '../statics/datas/moveNames/moveJpnNames.json'
import moveEng from '../statics/datas/moveNames/moveEngNames.json'
import abilChn from '../statics/datas/abilityNames/abilChnNames.json'
import abilJpn from '../statics/datas/abilityNames/abilJpnNames.json'
import abilEng from '../statics/datas/abilityNames/abilEngNames.json'

function getLabel (name) {
  let typeName = name.substring(0, 5)
  let realName = name.substring(5)
  switch (typeName) {
    case 'poke_':
      if (pokeChn.indexOf(realName) !== -1) {
        return realName
      }
      else if (pokeJpn.indexOf(realName) !== -1) {
        return pokeChn[pokeJpn.indexOf(realName)]
      }
      else if (pokeEng.indexOf(realName) !== -1) {
        return pokeChn[pokeEng.indexOf(realName)]
      }
      break
    case 'item_':
      if (itemChn.indexOf(realName) !== -1) {
        return realName
      }
      else if (itemJpn.indexOf(realName) !== -1) {
        return itemChn[itemJpn.indexOf(realName)]
      }
      else if (itemEng.indexOf(realName) !== -1) {
        return itemChn[itemEng.indexOf(realName)]
      }
      break
    case 'move_':
      if (moveChn.indexOf(realName) !== -1) {
        return realName
      }
      else if (moveJpn.indexOf(realName) !== -1) {
        return moveChn[moveJpn.indexOf(realName)]
      }
      else if (moveEng.indexOf(realName) !== -1) {
        return moveChn[moveEng.indexOf(realName)]
      }
      break
    case 'abil_':
      if (abilChn.indexOf(realName) !== -1) {
        return realName
      }
      else if (abilJpn.indexOf(realName) !== -1) {
        return abilChn[abilJpn.indexOf(realName)]
      }
      else if (abilEng.indexOf(realName) !== -1) {
        return abilChn[abilEng.indexOf(realName)]
      }
      break
  }
}
function getLetter (name) {
  let typeName = name.substring(0, 5)
  switch (typeName) {
    case 'poke_':
      return '宝可梦'
    case 'item_':
      return '道具'
    case 'move_':
      return '招式'
    case 'abil_':
      return '特性'
  }
}
function getRandomSecondLabel () {
  if (Math.floor(Math.random() * 50) % 4 === 0) {
    return `UID: ${uid().substring(0, 8)}`
  }
}
function parseNames () {
  return allNames.map(engName => {
    return {
      label: getLabel(engName),
      sublabel: engName.substring(5),
      rightLetter: getLetter(engName),
      avatar: '../statics/icons/egg.png',
      value: engName,
      rightColor: 'amber',
      rightIcon: 'search'
    }
  })
}
export default {
  name: 'tre-search',
  components: {
    QField,
    QInput,
    QBtn,
    QIcon,
    QCheckbox,
    QChipsInput,
    QAutocomplete,
    QSearch,
    Toast
  },
  props: {
    search: {
      type: Function,
      default: (term, done) => {
        done([])
      }
    },
    disable: Boolean,
    readonly: Boolean,
    placeholder: String
  },
  data () {
    return {
      loading: false,
      input: '',
      chipStatus: {
        pokemon: false,
        item: false,
        move: false,
        ability: false
      },
      showChip: true,
      result: '',
      allNames: parseNames(),
      errorState: false,
      errorMessage: ''
    }
  },
  methods: {
    closeChip: function () {
      this.showChip = false
      console.log(this.showChip)
    },
    updateCheck: function (e) {
      switch (e.keyCode) {
        case 13: // enter
          e.preventDefault()
          e.stopPropagation()
          if (this.input === 'pokemon') {
            this.chipStatus.pokemon = !this.chipStatus.pokemon
            this.input = ''
          }
          if (this.input === 'item') {
            this.chipStatus.item = !this.chipStatus.item
            this.input = ''
          }
          if (this.input === 'move') {
            this.chipStatus.move = !this.chipStatus.move
            this.input = ''
          }
          if (this.input === 'ability') {
            this.chipStatus.ability = !this.chipStatus.ability
            this.input = ''
          }
      }
    },
    selected (item) {
      Toast.create(`Selected suggestion "${item.label}"`)
    },
    pokemonFilter (input, { field, list }) {
      const token = input.toLowerCase()
      return list.filter(item => ('' + item[field]).toLowerCase().startsWith(token))
    }
  }
}
</script>

<style>
.tre-search {
  text-align: left;
}
</style>
